// 数据字典
import { Input, Button, Space, Table, Modal, Form, Select, Row, Col, message, Popconfirm, Switch, Pagination, DatePicker, DatePickerProps } from 'antd';
import React from 'react';
import { useState, useEffect } from 'react'
import type { ColumnsType } from 'antd/lib/table';
import { SearchOutlined, SyncOutlined, DownloadOutlined, CloudDownloadOutlined } from '@ant-design/icons';
import itemgroup from '../itemgroup.module.scss'
import axios from '../../../../utils/axios'
import { getData } from '../../../../utils/inspectionResult';
import moment from 'moment';
const DataDictionary = () => {
  const [distoryname,setDistoryname]=useState<string>()
const [distorycode,setDistorycode]=useState<string>()
  const onsearchid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setDistoryname(e.target.value)
  };
  const onsearchgroup = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setDistorycode(e.target.value)
  };
  // 获取表单数据
  const [data,setData]=useState([])
  const getdate=()=>{
    axios({
      url:'/material/selectDataDictionary',
    }).then(res=>{
      setData(res.data.data.listFix)
      console.log(res.data.data.listFix);
    }).catch(error=>{console.log(error);
    })
  }
  useEffect(()=>{
    getdate()
  },[])
  // 点击查询
  const searval=()=>{
    console.log(distoryname,distorycode);
    axios({
      url:'/material/selectDataDictionary',
      params:{dataDictionaryName:distoryname,dataDictionaryCode:distorycode}
    }).then(res=>{
      console.log(res);
      console.log('查询成功');
      setData(res.data.data.listFix)
      message.success('查询成功')
    }).catch(error=>console.log(error)
    )
  }
  const resoveval=()=>{
    setDistoryname('')
    setDistorycode('')
    getdate()
  }
  // 删除
  
  // 设置修改表单的数据
  const [editForm] = Form.useForm();
  const [addForm] = Form.useForm();
  // tab表格
  interface DataType {
    key: String;
    dataDictionaryId: number;//物料组代号
    serialNumber: number;//序列号
    materialGRoup: String;//物料组
    samplingPlan: String;//抽样方案
    updateTime: string;//维护时间
    Maintainer: String;//操作人
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'dataDictionaryId',
      key: 'serialNumber',
    },
    {
      title: '字典名称',
      dataIndex: 'dataDictionaryName',
      key: 'materialGroupCode',
    },
    {
      title: '字典code',
      dataIndex: 'dataDictionaryCode',
      key: 'materialGRoup',
    },
    {
      title: '字典值',
      key: 'samplingPlan',
      dataIndex: 'dataDictionaryValue',
    }
    ,
    {
      title: '更新时间',
      key: 'maintenanceTime',
      dataIndex: 'updateTime',
    },

    {
      title: '维护人',
      key: 'Maintainer',
      dataIndex: 'userName',
    },
    {
      title: '操作',
      key: 'Operation',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            setEditIsModalVisible(true);
            console.log(record);
            editForm.setFieldsValue(record)
            setEdittimer(record.updateTime)
          }}>编辑</a>
           <Popconfirm
            title="确认删除嘛?"
            onConfirm={() => { confirm(record.dataDictionaryId) }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  //弹出框的隐藏关闭
  // 添加
  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
  // 修改
  const [isEditModalVisible, setEditIsModalVisible] = useState(false);
  // 添加模态框
  const addmodule = () => {
    addForm.resetFields()
    setIsAddModalVisible(true)
  }
  // 添加完成
  const addhandleOk = () => {
    setIsAddModalVisible(false);
    console.log(addForm.getFieldsValue());
    axios({
      url:'/material/addDataDictionary',
      method:'post',
      data:{...addForm.getFieldsValue(),updateTime:addtimer,dataDictionaryState:0}
    }).then(res=>{
      console.log(res);
      if (res.data.code===200) {
      getdate()
        message.success('添加成功')
      }
    }).catch(error=>{console.log(error);
    })
  };
  // 取消添加
  const addhandleCancel = () => {
    setIsAddModalVisible(false);
  };
  // 编辑模态框
  const handleOk = () => {
    setEditIsModalVisible(false);
    console.log(editForm.getFieldsValue());
    axios({
      url:'/material/updateDataDictionary',
      method:'post',
      data:{
        ...editForm.getFieldsValue(),updateTime:edittimer,userId:2,dataDictionaryState:0
      }
    }).then(res=>{
      console.log(res);
      if (res.data.code===200) {
        getdate()
        message.success('查询成功')
      }
     
    }).catch(error=>console.log(error)
    )
  };
  const handleCancel = () => {
    setEditIsModalVisible(false);
  };
  // 删除确认按钮
  const confirm = (id: number) => {
    console.log(id);
    axios({
      url: '/material/deleteDataDictionary',
      method:'post',
      params: { dataDictionaryId: id }
    }).then(res => {
      console.log(res);
      if (res.status === 200) {
        getdate()
        message.success('删除成功')
      }
    }).catch(error => console.log(error)
    )
  };
  // 修改型式时间
  const [edittimer, setEdittimer] = useState<string>()
  const onedittimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setEdittimer(dateString)
  };
  // 添加时间
  const [addtimer, setAddtimer] = useState<string>()
  const onaddtimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setAddtimer(dateString)
  };
  return <div className={itemgroup.box}>
    {/* 搜索按钮 */}
    <div>
      <label htmlFor="">字典名称:</label>
      <Input className={itemgroup.searchone} style={{ width: 200 }} value={distoryname}  allowClear onChange={onsearchid} />
      <label htmlFor="">字典code:</label>
      <Input value={distorycode} className={itemgroup.searchone} style={{ width: 200 }}  allowClear onChange={onsearchgroup} />
      <Button onClick={()=>{searval()}} style={{ color: '#1890FF', border: '1px solid #2696FF', marginRight: 20 }} icon={<SearchOutlined />}>查询</Button>
      <Button onClick={()=>{resoveval()}} style={{ color: '#ffc069', border: '1px solid #ffc069' }} icon={<SyncOutlined style={{ color: '#ffc069' }} />}>重置</Button>
    </div>
    {/* 新增等功能 */}
    <div className={itemgroup.tewbox}>
      <Button onClick={() => { addmodule() }} style={{ marginRight: 10 }} type="primary" size={'small'}>
        +新增
      </Button>
      <Button icon={<DownloadOutlined />} style={{ marginRight: 10 }} type="primary" size={'small'}>
        导入
      </Button>
      <Button icon={<CloudDownloadOutlined />} type="primary" size={'small'}>
        模板下载
      </Button>
    </div>
    {/* 表格 */}
    <div>
    <Table rowKey={(record) => { return record.dataDictionaryId }} pagination={{ showQuickJumper: true, defaultPageSize: 2, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} columns={columns} dataSource={data} />
    </div>
    {/* 模态框 */}
    <div>
      <Modal title="物料组修改" visible={isEditModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form
          form={editForm}
          name="basic"
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="序列号"
            name={"dataDictionaryId"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input disabled />
          </Form.Item>

          <Form.Item
            label="字典名称"
            name={"dataDictionaryName"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="字典code"
            name={"dataDictionaryCode"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="字典值"
            name={"dataDictionaryValue"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="更新时间"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <DatePicker defaultValue={moment(edittimer, "YYYY-MM-DD")} onChange={onedittimeChange} />
          </Form.Item>
          
          <Form.Item
            label="维护人"
            name={"userName"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
    {/* 新增 */}
    <div>
      <Modal title="物料组新增" visible={isAddModalVisible} onOk={addhandleOk} onCancel={addhandleCancel}>
        <Form
          form={addForm}
          name="basic"
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
        >
          <Form.Item
            label="字典名称"
            name={"dataDictionaryName"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="字典code"
            name={"dataDictionaryCode"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="字典值"
            name={"dataDictionaryValue"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="更新时间"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <DatePicker  onChange={onaddtimeChange} />
          </Form.Item>
          
          <Form.Item
            label="维护人id"
            name={"userId"}
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  </div>
}
export default DataDictionary